<style scoped>
.user_info{padding: var(--van-padding-sm);}
.user_info img{width: 3.2em;height: 3.2em;object-fit: cover;border-radius: 50%;}
.user_info .max{padding-left: var(--van-padding-base);}

.level_head_img{padding: var(--van-padding-sm) var(--van-padding-md);}
.level_head_img img{width: 100%;border-radius: var(--van-cell-group-inset-radius);}

h3{text-align: center;padding-top: 20px;}
h3>span{color: var(--color-primary);}
.up_info{--van-cell-group-inset-padding: 10px var(--van-padding-md);--van-cell-label-margin-top: var(--van-padding-xs);--van-empty-padding: var(--van-padding-xs) 0;}
.up_info .tips{font-size: 0.8em;color: var(--color-bg-re-r);margin: var(--van-padding-xs) var(--van-padding-md);}
.up_info .tips.red{color: var(--van-danger-color);}

.benefit{padding-bottom: var(--van-padding-sm);}
.object_title img{height: 1.75em;}
.ratio_pay_table{text-align: center;}



</style>
<template>
  <div class="user_info flex">
    <img-referrer :src="user.head_img" alt=""/>
    <p class="max">{{user.nickname}}</p>
    <p>当前等级：{{level_map[user.level] ? level_map[user.level].name : '--'}}</p>
  </div>
  <div class="level_card">
    <ul>
      <li v-for="l_row in level_map"></li>
    </ul>
  </div>

  <van-tabs v-model:active="active_level" swipeable sticky >
    <van-tab v-for="(l_row,l) in level_map" :title="l_row.name" :name="l_row.level">
      <div v-if="l_row.head_img" class="level_head_img">
        <img-referrer :src="l_row.head_img" alt=""/>
      </div>
      <div class="up_info">
        <h3><span>晋升条件</span></h3>
        <van-empty v-show="l_row.condition_group.length===0" image="error" image-size="0.8rem" description="无法自然晋升" />
        <p v-if="l_row.condition_group.length>1" class="tips">以下条件，任选其一达成即可</p>
        <van-cell-group v-for="condition_group_row in l_row.condition_group" inset>
          <template v-for="condition in condition_group_row">
            <van-cell :title="condition.function_info" @click="click_condition(condition)">
              <template #label>
                <div class="progress">
                  <van-progress :percentage="condition.function_progress*100" />
                </div>
              </template>
            </van-cell>
          </template>
        </van-cell-group>
        <p v-if="level_map[l-1] && l_row.direct_up==0" class="tips red">前置条件：先升级到：{{level_map[l-1]['name']}}</p>
        <p v-if="l>0 && l_row.can_down==1" class="tips red">降级提醒：条件不满足时，会降级</p>
      </div>

      <div class="benefit">
        <h3><span>等级权益</span> <van-icon v-if="0" name="warning-o" @click="to('/user/kickback_type')" /> </h3>
        <van-cell-group inset title="订单佣金" v-if="Object.keys(ratio_pay_config.type_list).length">
          <van-cell  v-for="(object,key_o) in ratio_pay_config.object_list">
            <template #title>
              <div class="flex object_title">
                <img-referrer v-if="object.head_img" :src="object.head_img"/>
                <span>{{ object.title }}</span>
              </div>
            </template>
            <template #label>
              <div class="ratio_pay_table flex">
                <div v-for="(type,key_t) in ratio_pay_config.type_list" class="table_col max">
                  <p>{{type.title}}</p>
                  <p>{{get_ratio(l_row.level, 'ratio_pay', key_o, key_t)}}</p>
                </div>
              </div>
            </template>
          </van-cell>
        </van-cell-group>

        <van-cell-group inset title="邀新佣金" v-if="Object.keys(ratio_new_user_config.type_list).length">
          <van-cell v-for="(type,key_t) in ratio_new_user_config.type_list" :title="type.title" :value="get_ratio(l_row.level, 'ratio_new_user', '0', key_t)" />
        </van-cell-group>

        <van-cell-group inset title="升级奖励" v-if="Object.keys(ratio_up_level_config.type_list).length">
          <van-cell v-for="(type,key_t) in ratio_up_level_config.type_list" :title="type.title" :value="get_ratio(l_row.level, 'ratio_up_level', '0', key_t)" />
        </van-cell-group>
      </div>
    </van-tab>
  </van-tabs>

</template>

<script>
import {ajax} from "@/js/api_tool.js";
import s94Mjs from "s94-js";
import {href_handle} from "@/vue_plugin/router_auto.js";
import ImgReferrer from "@/components/widget/ImgReferrer.vue";
import {use_this_user} from "@/store/this_user.js";

export default {
  components: {ImgReferrer},
  data(){
    return {
      active_level: use_this_user().level || 0,
      user: use_this_user(),
      level_map: {},
      ratio_pay_config: {type_list:{}, object_list:{}},
      ratio_new_user_config: {type_list:{}},
      ratio_up_level_config: {type_list:{}},
    }
  },
  methods:{
    init(){
      ajax('/home/user/user_level_map', ({data})=>{
        Object.keys(data).forEach(k=>{
          this[k] = data[k];
        })
        this.active_level = this.user.level;
        this.level_map.forEach(l_row=>{
        })
      })
    },
    click_condition(condition){
      switch (condition.function) {
        case 'hasOrder':{
          let model_name = condition.param.order_model_name;
          let object_id = condition.param.object_id;
          if (model_name && object_id>0){
            href_handle(`/model_base/info?model_name=${model_name}&action=info&id=${object_id}`);
          }
        }break;
        case 'hasUser':{
          let model_name = condition.param.user_model_name;
          let object_id = condition.param.object_id;
          if (model_name && object_id>0){
            href_handle(`/model_base/info?model_name=${model_name}&action=info&id=${object_id}`);
          }
        }break;
      }
    },
    get_ratio(level, key, key_o, key_t){
      let v = s94Mjs.map(this.level_map[level], `${key}.${key_o}.${key_t}`, 0);
      return v+(key==='ratio_pay'?'%':'元');
    },
    to(href){
      href_handle(href);
    }
  },
  computed:{},
  mounted(){
    this.init();

  }
}
</script>